<template>
  <div class="cont">
    
    <a-spin :spinning="spinning">
     <Amap @complete="complete" style="height: 500px"></Amap>
    </a-spin>

    <div v-show="drawTip" id="drawTip" class="draw-tip">
      <div class="draw-tip-text"> 鼠标左键点击地图绘制区域，双击击鼠标左键结束绘制 </div>
    </div>

    <div class="oper">
      <!-- <div class="tip-text">人员进入围栏后，开启室内定位</div> -->
      <a-button @click="drawPolygon" type="primary" class="btn">开始添加范围</a-button>
      <a-button @click="ok" type="primary" class="btn">保存</a-button>
      <a-button @click="deletePolygon" class="btn">重置</a-button>
    </div>
  </div>
</template>
<script  setup>
  import { reactive, ref, watch , onMounted, onUnmounted } from 'vue';
  import Amap from '@/components/Amap/Amap.vue'; 
  import { message } from 'ant-design-vue';

  import location from '@/assets/map/location.png'
import trackDot from '@/assets/map/track-dot.png'
import {addPolygonFence, addMarkerText} from '@/components/Amap/mapUtils'

  const props = defineProps({
    modelValue: Array,
    itemData: Object
  });

  const emit = defineEmits(['ok','complete', 'update:modelValue']);

  let overlays = []
  let path = []
  let drawTip = ref(false);
  let map = null;
  let mouseTool = null;
  let isDelete = false;
  const spinning = ref(true)


 const init = () => {
  let typeName = ''
  if(props.itemData.className == 'plantBase'){
    typeName = '（基地）'
  } else {
    typeName = '（空地）'
  }
   addMarkerText({
            map: map,
            lng: props.itemData.lng,
            lat: props.itemData.lat,
            text: props.itemData.name + typeName,
            // imgUrl: location,
            // width: 46,
            // height: 62,
            extData: props.itemData
        })
        map.setFitView()
  }

  const ok = () => {
    emit('ok')
  }

  const complete = (e) => {
    spinning.value = false
    map = e;
    init()


    mouseTool = new AMap.MouseTool(map);
    mouseTool.on('draw', (e) => {
      
      mouseTool.close(true);
      drawTip.value = false;
      path = [];
      for (var p of e.obj.getPath()) {
        path.push([p.lng, p.lat]);
      }
      addPolygon(path)

    });

    emit('complete')

  };

  const addPolygon = (path, id) => {
    let poly = new AMap.Polygon({
        map: map,
        path: path, //设置多边形边界路径
        strokeColor: '#EB5B5B', //线颜色
        strokeOpacity: 0.9, //线透明度
        strokeWeight: 1, //线宽
        fillColor: '#FA5151', //填充色
        fillOpacity: 0.5, //填充透明度

        extData: {id: id}
      });

      overlays.push(poly);

      emit('update:modelValue', getPath())
  }

 

  const drawPolygon = () => {
    isDelete = false;
    mouseTool.polygon({
      fillColor: '#d6333f',
      strokeColor: '#d6333f',
      //同Polygon的Option设置
    });
    drawTip.value = true;
  };

  const deletePolygon = () => {
    mouseTool.close(true);
     drawTip.value = false;
    isDelete = true;
    message.success('已重置');

    map.clearMap();
    overlays = []
    path = []

    emit('update:modelValue', getPath())

    drawPolygon()
  };

  const getPath = () => {
    return overlays
    var points = [];

    for (var item of overlays) {
   
      var pArr = item.getPath();

      pArr = pArr.map(p => {
        return {
          longitude: p.lng,
          latitude: p.lat
        }
      })
      points.push({
        shapeType: 1,
        id: item.getOptions().extData.id,
        vertexes: pArr
      })
    }

    return points
  
  };

  const setPath = (list) => {


    for(let item of list){
      let paths = []
    
      paths = item.vertexes.map(p => {
        return [p.longitude, p.latitude]
      })

      addPolygon(paths, item.id)
    }
     map.setFitView()
  }

  const getOverlays = () => {
      return overlays
  }



  defineExpose({
      getOverlays,path, overlays, getPath, setPath
  })
</script>
<style scoped>
  .cont {
    width: 100%;
    height: 100%;
    position: relative;
   border: 1px solid #E8E8E8;
  }
  .btn {
    margin: 0 20px 0 0;
  }
  .oper {
    padding: 20px 0; text-align: right;
  }
  .place {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
  }
  .place-con{
    position: absolute;
    width: 100%;
    background: #fff;
    top: 60px;
    left: 0;
    box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
  }
  .place-label {
    width: 80px;
    display: inline-block;
    vertical-align: middle;
  }
  .place-input {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    padding: 5px 10px;
    border: 1px solid #d9d9d9;
  }
  .place-input:focus {
    outline: 1px solid #d9d9d9;
  }

  @keyframes beat {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.1, 1.1);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  @-moz-keyframes beat /* Firefox */ {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.1, 1.1);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  @-webkit-keyframes beat /* Safari 和 Chrome */ {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.1, 1.1);
    }
    100% {
      transform: scale(1, 1);
    }
  }

  @-o-keyframes beat /* Opera */ {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.1, 1.1);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  .draw-tip {
    position: absolute;
    right: 20px;
    bottom: 100px;
    padding: 10px 20px;
    z-index: 10;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  }
  .draw-tip-text {
    color: #e73d4a;
    animation: beat 1s infinite;
    -moz-animation: beat 1s infinite; /* Firefox */
    -webkit-animation: beat 1s infinite; /* Safari 和 Chrome */
    -o-animation: beat 1s infinite;
  }
  .tip-text{
    display: inline-block; padding: 0 40px 0 0 ;
  }
</style>
